<!DOCTYPE html>
<html lang="cn">
<head>
    <meta charset="UTF-8">
    <title>弹力球</title>
    <style>
        #bool{
            border:1px solid;
            width:2000px;
            height:800px;
        }
        #img{
            /*border:1px solid;*/
            background-image: url('./1.png') ;
            background-overflow:hidden;
            /*background:no-repeat;*/
            background-size:100px;
            width:100px;
            height:80px;
            position:absolute;
            top:100px;
            left:100px;
        }
    </style>
</head>
<body>
    <h1>弹力球</h1>
    <hr>
    <div id="bool">
        <div  id="img" style="top:100px;left:100px;">
            
        </div>

    </div> 
    <script>
        // 按住的时候
        bool.onmousedown = function(env){
            var env = env||window.event;
            // 获取鼠标相对位置
            var left = env.offsetX;
            var top = env.offsetY;
            // 移动的时候
            document.onmousemove = function(en){
                var en = en || window.event;
                // 获取 球的相对位置;
                var bleft = en.x - left;
                var btop = en.y - top;
                img.style.top = btop + 'px';
                img.style.left = bleft + 'px';
            }
        }

        // 松开的时候
        document.onmouseup = function(ben){
            var ben = ben || window.event;
            // 解除绑定
            document.onmousemove = null;

            // 自由落体
            var t = 0;
            var h = 0;
            var k = 0;
            var y = 0;
            var b = 0;
            var x = 0;



            // 第一次计时器
            function demo(){


                // 获取当前球体的坐标;
            // console.log(ben.clientY);
                // 设置 自由落体时间
                t++;
                x++;
            // console.log(t);
                // 1px 为 1m 设置下落距离
                h = 10*(t*t/10)/2;
                c = Math.pow(8/9,t);
                downlen = ben.clientY + h;
                img.style.left = ben.clientX + 10*x + 'px'; 
                    // console.log(downlen);

                t2 = Math.sqrt((downlen - ben.clientY)*2);
                if (t2<Math.sqrt((830 - ben.clientY)*2)) {
                    img.style.top = downlen + 'px';                        
                    // console.log(img.style.top);
                    }
                if (t2 >=Math.sqrt((830 - ben.clientY)*2)){
                    img.style.top = parseInt(img.style.top)-10 + 'px';
                    // console.log(parseInt(img.style.top));
                    // console.log(830-ben.clientY);
                    if (parseInt(img.style.top) <= ((830-ben.clientY)/2) + ben.clientY){
                        clearInterval(time1);
                        var res = ((830-ben.clientY)/2) + ben.clientY;
                             // 第二次计时器
                           (function (){

                            // alert('111');
                                var time2 = setInterval(demo2,10);
                                    var x2 = 0;
                                function demo2(){
                                    x++;

                                img.style.left = ben.clientX + 10*x + 'px';
                                    y++;
                                e = Math.pow(8/9,y);
                                h = 10*(y*y/10)/2;
                                downlen = parseInt(img.style.top) + h;
                                console.log(img.style.top);
                                t2 = Math.sqrt((downlen - parseInt(img.style.top))*2);
                                if (t2<Math.sqrt((830 - parseInt(img.style.top))*2)) {
                                    img.style.top = downlen + 'px';                        
                                    // console.log(img.style.top);
                                    }

                                if (t2 >=Math.sqrt((830 - res)*2)){
                                img.style.top = parseInt(img.style.top)-10 + 'px';
                                    if (parseInt(img.style.top) <= ((830-res)/2) +res ) {
                                            clearInterval(time2);
                                                // 第三次计时器
                                            (function (){

                                            // alert('111');
                                                var time3 = setInterval(demo3,10);
                                                var res2 = ((830-img.style.top)/2) + img.style.top;
                                                function demo3(){
                                                    x++;
                                                    b++;
                                                g = Math.pow(8/9,b);
                                                h = 10*(b*b/10)/2;
                                                console.log(h);
                                                downlen = parseInt(img.style.top) + h;
                                                console.log(img.style.top);
                                                t2 = Math.sqrt((downlen - parseInt(img.style.top))*2);
                                                if (t2<Math.sqrt((830 - parseInt(img.style.top))*2)) {
                                                img.style.left = ben.clientX + 10*x + 'px';
                                                    img.style.top = downlen + 'px';                        
                                                    // console.log(img.style.top);
                                                    }

                                                if (t2 >=Math.sqrt((830 - res2)*2)){
                                                        img.style.left = ben.clientX + 10*x + 'px';

                                                        img.style.top = parseInt(img.style.top)-10 + 'px';
                                                            clearInterval(time3);return;
                                    //                 if (parseInt(img.style.top) <= ((830-res2)/2) +res2 ) {



                                    // }

                                }

                               
                           }                       
                        
                    })(); 






                                    }

                                }

                               
                           }                       
                        
                    })(); 
                }
            }
        }
           var time1 = setInterval(demo,10);





    
    }

    </script>

</body>
</html>